<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语音题词器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f0f0f0;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .controls {
            margin-bottom: 20px;
            display: flex;
            gap: 10px;
            align-items: center;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            background-color: #4CAF50;
            color: white;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #45a049;
        }

        button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }

        .status {
            margin-left: 10px;
            color: #666;
        }

        #textInput {
            width: 100%;
            height: 150px;
            margin-bottom: 20px;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ddd;
            border-radius: 5px;
            resize: vertical;
        }

        #display {
            font-size: 24px;
            line-height: 1.5;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
            min-height: 200px;
            white-space: pre-wrap;
        }

        .highlight {
            background-color: yellow;
            transition: background-color 0.3s;
        }

        .settings {
            margin-bottom: 20px;
        }

        .settings label {
            margin-right: 10px;
        }

        .settings input[type="number"] {
            width: 60px;
            padding: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>语音题词器</h1>
        
        <div class="settings">
            <label>
                滚动速度 (毫秒):
                <input type="number" id="scrollSpeed" value="100" min="50" max="500">
            </label>
            <label>
                每次滚动字数:
                <input type="number" id="scrollChars" value="1" min="1" max="10">
            </label>
        </div>

        <textarea id="textInput" placeholder="在此输入文本..."></textarea>
        
        <div class="controls">
            <button id="startBtn">开始识别</button>
            <button id="stopBtn" disabled>停止</button>
            <button id="resetBtn">重置</button>
            <span class="status" id="status">未开始</span>
        </div>

        <div id="display"></div>
    </div>

    <script>
        let recognition;
        let isRecognizing = false;
        let currentIndex = 0;
        let scrollInterval;
        let lastRecognizedText = '';
        let displayText = '';

        const textInput = document.getElementById('textInput');
        const display = document.getElementById('display');
        const startBtn = document.getElementById('startBtn');
        const stopBtn = document.getElementById('stopBtn');
        const resetBtn = document.getElementById('resetBtn');
        const status = document.getElementById('status');
        const scrollSpeed = document.getElementById('scrollSpeed');
        const scrollChars = document.getElementById('scrollChars');

        // 检查浏览器是否支持语音识别
        if ('webkitSpeechRecognition' in window) {
            recognition = new webkitSpeechRecognition();
            recognition.continuous = true;
            recognition.interimResults = true;
            recognition.lang = 'zh-CN';

            recognition.onstart = () => {
                isRecognizing = true;
                status.textContent = '正在识别...';
                startBtn.disabled = true;
                stopBtn.disabled = false;
            };

            recognition.onend = () => {
                isRecognizing = false;
                status.textContent = '识别已停止';
                startBtn.disabled = false;
                stopBtn.disabled = true;
            };

            recognition.onresult = (event) => {
                let interimTranscript = '';
                
                for (let i = event.resultIndex; i < event.results.length; i++) {
                    const transcript = event.results[i][0].transcript;
                    if (event.results[i].isFinal) {
                        lastRecognizedText = transcript;
                    } else {
                        interimTranscript += transcript;
                    }
                }

                const fullText = textInput.value;
                const recognizedText = (lastRecognizedText + interimTranscript).toLowerCase();
                
                // 在文本中查找匹配
                if (recognizedText) {
                    let found = false;
                    for (let i = currentIndex; i < fullText.length; i++) {
                        const nextChunk = fullText.substr(i, recognizedText.length).toLowerCase();
                        if (nextChunk.includes(recognizedText)) {
                            currentIndex = i;
                            found = true;
                            break;
                        }
                    }
                    
                    if (found) {
                        updateDisplay();
                    }
                }
            };

            recognition.onerror = (event) => {
                console.error('识别错误:', event.error);
                status.textContent = '识别错误: ' + event.error;
            };
        } else {
            alert('您的浏览器不支持语音识别功能');
            startBtn.disabled = true;
        }

        function updateDisplay() {
            const text = textInput.value;
            const beforeHighlight = text.substring(0, currentIndex);
            const highlightedText = text.substring(currentIndex, currentIndex + parseInt(scrollChars.value));
            const afterHighlight = text.substring(currentIndex + parseInt(scrollChars.value));
            
            display.innerHTML = `${beforeHighlight}<span class="highlight">${highlightedText}</span>${afterHighlight}`;
            
            // 自动滚动到高亮位置
            const highlightElement = display.querySelector('.highlight');
            if (highlightElement) {
                highlightElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }
        }

        function startScrolling() {
            stopScrolling(); // 先停止之前的滚动
            scrollInterval = setInterval(() => {
                if (currentIndex < textInput.value.length) {
                    currentIndex += parseInt(scrollChars.value);
                    updateDisplay();
                } else {
                    stopScrolling();
                }
            }, parseInt(scrollSpeed.value));
        }

        function stopScrolling() {
            if (scrollInterval) {
                clearInterval(scrollInterval);
                scrollInterval = null;
            }
        }

        startBtn.onclick = () => {
            if (textInput.value.trim() === '') {
                alert('请先输入文本');
                return;
            }
            recognition.start();
            startScrolling();
        };

        stopBtn.onclick = () => {
            recognition.stop();
            stopScrolling();
        };

        resetBtn.onclick = () => {
            currentIndex = 0;
            lastRecognizedText = '';
            stopScrolling();
            if (isRecognizing) {
                recognition.stop();
            }
            updateDisplay();
        };

        // 初始显示
        updateDisplay();
    </script>
</body>
</html> 